<template>
  <el-container class="activity-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title">
        <div class="label">营销活动</div>
      </div>
    </el-header>
    <el-main>
      <div class="sa-m-b-16" v-for="ad in activityData" :key="ad">
        <div class="title sa-m-b-12">{{ ad.title }}</div>
        <div class="sa-flex sa-flex-wrap">
          <template v-for="(item, key) in ad.children" :key="item">
            <el-button v-if="key == 'full_coupon'" v-auth="'shop.admin.coupon.list'" link>
              <div class="item sa-flex" @click="handleActivity(key)">
                <div class="icon">
                  <img :src="'./static/images/shop/activity/' + key + '.png'" />
                </div>
                <div class="sa-m-l-12">
                  <div class="title">{{ item.title }}</div>
                  <div class="subtitle">{{ item.subtitle }}</div>
                </div>
              </div>
            </el-button>
            <el-button
              v-else-if="key == 'score_shop'"
              v-auth="'shop.admin.app.scoreshop.list'"
              link
            >
              <div class="item sa-flex" @click="handleActivity(key)">
                <div class="icon">
                  <img :src="'./static/images/shop/activity/' + key + '.png'" />
                </div>
                <div class="sa-m-l-12">
                  <div class="title">{{ item.title }}</div>
                  <div class="subtitle">{{ item.subtitle }}</div>
                </div>
              </div>
            </el-button>
            <div v-else class="item sa-flex" @click="handleActivity(key)">
              <div class="icon">
                <img :src="'./static/images/shop/activity/' + key + '.png'" />
              </div>
              <div class="sa-m-l-12">
                <div class="title">{{ item.title }}</div>
                <div class="subtitle">{{ item.subtitle }}</div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.activity.activity',
  };
</script>
<script setup>
  import { useRouter } from 'vue-router';
  import { activityData } from './data';

  const router = useRouter();

  function handleActivity(type) {
    if (type == 'full_coupon') {
      router.push({
        path: '/shop/admin/coupon',
      });
    } else if (type == 'score_shop') {
      router.push({
        path: '/shop/admin/app/scoreShop',
      });
    } else if (type == 'wechat_mplive') {
      router.push({
        path: '/shop/admin/app/mplive',
      });
    } else {
      router.push({
        path: '/shop/admin/activity/list',
        query: {
          type: type,
        },
      });
    }
  }
</script>
<style lang="scss" scoped>
  .activity-view {
    .title {
      line-height: 20px;
      font-size: 16px;
      color: var(--sa-title);
      text-align: left;
    }
    .item {
      width: 250px;
      padding: 18px 20px;
      background: var(--sa-table-header-bg);
      border-radius: 4px;
      margin: 0 16px 16px 0;
      cursor: pointer;
      &:last-of-type {
        margin-right: 0;
      }
      &:hover {
        transition: width height 0.5s;
        transform: scale(1.05);
      }
      .icon {
        width: 44px;
        height: 44px;
        background: var(--el-color-primary);
        border-radius: 4px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .title {
        line-height: 18px;
        font-size: 14px;
        font-weight: 600;
        color: var(--sa-subtitle);
        margin: 2px 0 6px;
      }
      .subtitle {
        line-height: 16px;
        font-size: 12px;
        color: var(--sa-subfont);
      }
    }
    :deep() {
      .el-button.is-link {
        padding: 0;
        margin-right: 16px;
      }
    }
  }
</style>
